<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(function () {
            $(".btn1").click(function () {
                //$(selector).animate({params},speed,callback);
                $("div").animate({
                    left: "250px"
                });
            });
            $(".btn2").click(function () {
                //$(selector).animate({params},speed,callback);
                // animate() 方法来操作所有 CSS 属性
                $("div").animate({
                    left: "250px",
                    left: '250px',
                    opacity: '0.5',
                    height: '150px',
                    width: '150px'
                });
            });
            //增加宽度和高度
            $(".btn3").click(function () {
                $("div").animate({
                    left: '250px',
                    height: '+=150px',
                    width: '+=150px'
                });
            });
            //预定义值
            $(".btn4").click(function () {
                $("div").animate({
                    height: 'toggle'
                });
            });
            //队列功能
            $(".btn5").click(function () {
                var div = $("div");
                div.animate({ height: '300px', opacity: '0.4' }, "slow");
                div.animate({ width: '300px', opacity: '0.8' }, "slow");
                div.animate({ height: '100px', opacity: '0.4' }, "slow");
                div.animate({ width: '100px', opacity: '0.8' }, "slow");
            });
            //实例
            $(".btn6").click(function () {
                var div = $("div");
                div.animate({ left: '100px' }, "slow");
                div.animate({ fontSize: '3em' }, "slow");
            });

            //停止动画
            $(".btn7").click(function () {
                // $(selector).stop(stopAll,goToEnd);
                $("div").stop();
            });
        });
    </script>
</head>

<body>
    <button class="btn1">移动方块</button>
    <button class="btn2">改变属性</button>
    <button class="btn3">改变css宽高</button>
    <button class="btn4">预定义的值</button>
    <button class="btn5">队列功能</button>
    <button class="btn6">实例</button>
    <button class="btn7">停止动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
        如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">测试
    </div>

</body>

</html>